<template>
  <div>
    <el-row :gutter="20">
      <el-form
        :model="policyForm"
        :rules="policyRules"
        ref="policyForm"
        label-width="120px"
      >
        <el-col :span="8">
          <el-form-item label="政策名称:" prop="polName">
            <el-input
              size="small"
              v-model="policyForm.polName"
              placeholder="请输入政策名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="政策类型:" prop="polType">
            <el-select
              class="haruyuki-width-100"
              size="small"
              v-model="policyForm.polType"
              placeholder="请选择政策类型"
            >
              <el-option
                :label="item.dictValue"
                :value="item.dictKey"
                v-for="(item, index) in polTypeList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="选择通道:" prop="aisleData">
            <el-select
              class="haruyuki-width-100"
              size="small"
              value-key="aisleCode"
              v-model="policyForm.aisleData"
              @change="templateAllChange"
              placeholder="请选择通道"
            >
              <el-option
                v-for="item in aisleList"
                :key="item.aisleCode"
                :label="item.aisleName"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="haruyuki-flex-x-end haruyuki-mb-20" v-if="data.length > 0">
      <div class="haruyuki-mr-20">
        <span>结算成本：</span>
        <el-input-number
          size="mini"
          v-model="aptTemplate.aptRate"
          :precision="4"
          :step="0.0001"
          :min="0"
          :max="1"
        ></el-input-number>
        <span> %</span>
      </div>
      <div class="haruyuki-mr-20">
        <span>结算比例：</span>
        <el-input-number
          size="mini"
          v-model="aptTemplate.aptScale"
          :precision="0"
          :min="1"
          :max="100"
        ></el-input-number>
        <span> %</span>
      </div>
      <div class="haruyuki-mr-20">
        <span>封顶金额：</span>
        <el-input-number
          size="mini"
          v-model="aptTemplate.aptMax"
          :precision="2"
          :step="0.1"
          :min="0"
        ></el-input-number>
        <span> ¥</span>
      </div>
      <el-button type="primary" size="mini" plain @click="submitCover"
        >一键填入</el-button
      >
    </div>
    <!-- 政策模板 START -->
    <div class="haruyuki-scrollbar-70vh haruyuki-p-10">
      <div class="tree aisle-policy-bg" v-for="(item, index) in data" :key="index">
        <details open>
          <summary class="summary-box">
            <div
              class="tree-item w100 haruyuki-flex-space-between haruyuki-align-items-center"
            >
              <div class="haruyuki-flex-center">
                <span class="haruyuki-size-16 policy-ml-3 policy-mr-3"
                  >通道名称：{{ item.aisleName }}</span
                >
                <div class="policy-mr-3" v-if="item.isDefault == 1">
                  <el-tag size="mini" effect="plain">
                    默认通道
                  </el-tag>
                </div>
              </div>
              <div class="haruyuki-flex-center">
                <div v-if="item.isDefault == 0">
                  <el-button
                    type="primary"
                    size="mini"
                    plain
                    @click.stop="() => handleSwitch(index)"
                  >
                    设为默认通道
                  </el-button>
                </div>
              </div>
            </div>
          </summary>
          <!-- 扫码 START -->
          <details open>
            <summary>
              <span class="tree-item">扫码成本</span>
            </summary>
            <details v-for="(cItem, cIndex) in item.servicePolicy.scan.productList" :key="cIndex" open>
              <summary>
                <span class="tree-item">{{ cItem.productTypeName }}</span>
              </summary>
              <details v-for="(uItem, uIndex) in cItem.rateList" :key="uIndex">
                <summary>
                  <div class="tree-item input-tree-item" v-if="serviceScanRateKey(uItem.ylType, 'rate', cItem.productType)">
                    <span class="input-tree-item-left">{{ scanRateTypeName(uItem.ylType, cItem.productType) }}结算成本(比例)：</span>
                    <el-input
                      class="haruyuki-width-100s"
                      size="mini"
                      v-model="uItem.rate"
                      onkeyup="value=value.replace(/[^\d^\.]+/g,'');value=value.toString().match(/^\d+(?:\.\d{0,4})?/)"
                      @keyup.native="proving($event)"
                    ></el-input>
                    <span class="p_L10">%</span>
                  </div>
                  <div class="tree-item input-tree-item" v-if="serviceScanRateKey(uItem.ylType, 'scale', cItem.productType)">
                    <span class="input-tree-item-left">{{ scanRateTypeName(uItem.ylType, cItem.productType) }}结算(比例)：</span>
                    <el-input
                      class="haruyuki-width-100s"
                      size="mini"
                      v-model="uItem.scale"
                      onkeyup="value=value.replace(/[^\d^\.]+/g,'');value=value.toString().match(/^\d+(?:\.\d{0,4})?/)"
                      @keyup.native="proving($event)"
                    ></el-input>
                    <span class="p_L10">%</span>
                  </div>
                  <div class="tree-item input-tree-item" v-if="serviceScanRateKey(uItem.ylType, 'aptMax', cItem.productType)">
                    <span class="input-tree-item-left">{{ scanRateTypeName(uItem.ylType, cItem.productType) }}封顶金额(笔)：</span>
                    <el-input
                      class="haruyuki-width-100s"
                      size="mini"
                      v-model="uItem.aptMax"
                      onkeyup="value=value.replace(/[^\d^\.]+/g,'');value=value.toString().match(/^\d+(?:\.\d{0,4})?/)"
                      @keyup.native="proving($event)"
                    ></el-input>
                    <span class="p_L10">元</span>
                  </div>
                  <div class="tree-item input-tree-item" v-if="serviceScanRateKey(uItem.ylType, 'aptMin', cItem.productType)">
                    <span class="input-tree-item-left">{{ scanRateTypeName(uItem.ylType, cItem.productType) }}封底金额(笔)：</span>
                    <el-input
                      class="haruyuki-width-100s"
                      size="mini"
                      v-model="uItem.aptMin"
                      onkeyup="value=value.replace(/[^\d^\.]+/g,'');value=value.toString().match(/^\d+(?:\.\d{0,4})?/)"
                      @keyup.native="proving($event)"
                    ></el-input>
                    <span class="p_L10">元</span>
                  </div>
                </summary>
              </details>
            </details>
          </details>
          <!-- 扫码 END -->
          <!-- 刷卡 START -->
          <details open>
            <summary>
              <span class="tree-item">刷卡成本</span>
            </summary>
            <details v-for="(cItem, cIndex) in item.servicePolicy.pos.productList" :key="cIndex" open>
              <summary>
                <span class="tree-item">{{ cItem.productTypeName }}</span>
              </summary>
              <details v-for="(uItem, uIndex) in cItem.rateList" :key="uIndex">
                <summary>
                  <div class="tree-item input-tree-item" v-if="servicePosRateKey(uItem.ylType, 'rate', cItem.productType)">
                    <span class="input-tree-item-left">{{ posRateTypeName(uItem.ylType, cItem.productType) }}结算成本(比例)：</span>
                    <el-input
                      class="haruyuki-width-100s"
                      size="mini"
                      v-model="uItem.rate"
                      onkeyup="value=value.replace(/[^\d^\.]+/g,'');value=value.toString().match(/^\d+(?:\.\d{0,4})?/)"
                      @keyup.native="proving($event)"
                    ></el-input>
                    <span class="p_L10">%</span>
                  </div>
                  <div class="tree-item input-tree-item" v-if="servicePosRateKey(uItem.ylType, 'scale', cItem.productType)">
                    <span class="input-tree-item-left">{{ posRateTypeName(uItem.ylType, cItem.productType) }}分润(比例)：</span>
                    <el-input
                      class="haruyuki-width-100s"
                      size="mini"
                      v-model="uItem.scale"
                      onkeyup="value=value.replace(/[^\d^\.]+/g,'');value=value.toString().match(/^\d+(?:\.\d{0,4})?/)"
                      @keyup.native="proving($event)"
                    ></el-input>
                    <span class="p_L10">%</span>
                  </div>
                  <div class="tree-item input-tree-item" v-if="servicePosRateKey(uItem.ylType, 'aptMax', cItem.productType)">
                    <span class="input-tree-item-left">{{ posRateTypeName(uItem.ylType, cItem.productType) }}封顶金额(笔)：</span>
                    <el-input
                      class="haruyuki-width-100s"
                      size="mini"
                      v-model="uItem.aptMax"
                      onkeyup="value=value.replace(/[^\d^\.]+/g,'');value=value.toString().match(/^\d+(?:\.\d{0,4})?/)"
                      @keyup.native="proving($event)"
                    ></el-input>
                    <span class="p_L10">元</span>
                  </div>
                  <div class="tree-item input-tree-item" v-if="servicePosRateKey(uItem.ylType, 'aptMin', cItem.productType)">
                    <span class="input-tree-item-left">{{ posRateTypeName(uItem.ylType, cItem.productType) }}封底金额(笔)：</span>
                    <el-input
                      class="haruyuki-width-100s"
                      size="mini"
                      v-model="uItem.aptMin"
                      onkeyup="value=value.replace(/[^\d^\.]+/g,'');value=value.toString().match(/^\d+(?:\.\d{0,4})?/)"
                      @keyup.native="proving($event)"
                    ></el-input>
                    <span class="p_L10">元</span>
                  </div>
                </summary>
              </details>
            </details>
          </details>
          <!-- 刷卡 END -->
          <!-- 垫资 START -->
          <details open>
            <summary>
              <span class="tree-item">垫资成本</span>
            </summary>
            <details open>
              <summary>
                <span class="tree-item">扫码垫资成本</span>
              </summary>
              <details>
                <summary>
                  <div class="tree-item input-tree-item">
                    <span class="input-tree-item-left">扫码垫资成本(比例)：</span>
                    <el-input
                      class="haruyuki-width-100s"
                      size="mini"
                      v-model="item.servicePolicy.codeAdvanceRate.codeAdvanceRate"
                      onkeyup="value=value.replace(/[^\d^\.]+/g,'');value=value.toString().match(/^\d+(?:\.\d{0,4})?/)"
                      @keyup.native="proving($event)"
                    ></el-input>
                    <span class="p_L10">%</span>
                  </div>
                </summary>
              </details>
            </details>
            <details open>
              <summary>
                <span class="tree-item">刷卡垫资成本</span>
              </summary>
              <details>
                <summary>
                  <div class="tree-item input-tree-item">
                    <span class="input-tree-item-left">借记卡垫资成本(比例)：</span>
                    <el-input
                      class="haruyuki-width-100s"
                      size="mini"
                      v-model="item.servicePolicy.codeAdvanceRate.debitCodeAdvanceRate"
                      onkeyup="value=value.replace(/[^\d^\.]+/g,'');value=value.toString().match(/^\d+(?:\.\d{0,4})?/)"
                      @keyup.native="proving($event)"
                    ></el-input>
                    <span class="p_L10">%</span>
                  </div>
                  <div class="tree-item input-tree-item">
                    <span class="input-tree-item-left">贷记卡垫资成本(比例)：</span>
                    <el-input
                      class="haruyuki-width-100s"
                      size="mini"
                      v-model="item.servicePolicy.codeAdvanceRate.creditCodeAdvanceRate"
                      onkeyup="value=value.replace(/[^\d^\.]+/g,'');value=value.toString().match(/^\d+(?:\.\d{0,4})?/)"
                      @keyup.native="proving($event)"
                    ></el-input>
                    <span class="p_L10">%</span>
                  </div>
                </summary>
              </details>
            </details>
          </details>
          <!-- 垫资 END -->
        </details>
      </div>
    </div>
    <!-- 政策模板 END -->
  </div>
</template>

<script>
import { getAisleOemList, getDetailTemplate } from "@/api/rb-service/serviceinfo/service_info";
import { getDictionary } from "@/api/system/dict";

export default {
  props: {
    policyForm: {
      type: Object,
      default: () => {
        return {
          id: null,
          polName: '',
          polType: '',
          aisleData: null,
        }
      }
    },
    oem: {
      type: Object,
      default: () => {
        return {
          userNo: "",
          userType: "2"
        }
      }
    }
  },
  data() {
    return {
      policyRules: {
        polName: [
          { required: true, message: "请输入政策名称", trigger: "blur" },
        ],
        polType: [
          { required: true, message: "请输入政策类型", trigger: "blur" },
        ],
        aisleData: [{ required: true, message: "请选择通道", trigger: "blur" }],
      },
      data: [], //通道政策 树形数据
      polTypeList: [],
      aisleList: [],
      aptTemplate: {
        aptRate: 0,
        aptScale: 0,
        aptMax: 0
      },
    };
  },
  computed: {
    scanRateTypeName() {
      return (val, productType) => {
        /* 银联二维码大额 ylType 1.贷记卡 2.借记卡 */
        if (productType == 4) {
          if (val == 1) {
            return (val = '贷记卡');
          } else if (val == 2) {
            return (val = '借记卡');
          }
        }
      };
    },
    posRateTypeName() {
      return (val, productType) => {
        /* 云闪付 ylType 1.优惠 2.贷记卡 3.借记卡 */
        if (productType == 3) {
          if (val == 1) {
            return (val = '优惠');
          } else if (val == 2) {
            return (val = '贷记卡');
          } else if (val == 3) {
            return (val = '借记卡');
          }
        }
      };
    },
    /* 服务商 scan 控制可设置费率 */
    serviceScanRateKey() {
      return (val, key, productType) => {
        let obj = {}
        if (productType == 1) {
          obj = { 'rate': 0 };
        } else if (productType == 2) {
          obj = { 'rate': 0 }
        } else if (productType == 3) {
          obj = { 'rate': 0 };
        } else if (productType == 4) {
          if (val == 1) {
            obj = { 'rate': 0 };
          } else if (val == 2) {
            obj = { 'rate': 0, 'aptMax': 0 }
          }
        } else if (productType == 5) {
          obj = { 'scale': 0 };
        }
        if (obj.hasOwnProperty(key)) {
          return true
        } else {
          return false
        }
      };
    },
    /* 服务商 pos 控制可设置费率 */
    servicePosRateKey() {
      return (val, key, productType) => {
        let obj = {}
        if (productType == 1) {
          obj = { 'rate': 0 };
        } else if (productType == 2) {
          obj = { 'rate': 0, 'aptMax': 0 }
        } else if (productType == 3) {
          if (val == 1) {
            obj = { 'rate': 0 };
          } else if (val == 2) {
            obj = { 'rate': 0 };
          } else if (val == 3) {
            obj = { 'rate': 0, 'aptMax': 0 }
          }
        } else if (productType == 4) {
          obj = { 'rate': 0 };
        } else if (productType == 5) {
          obj = { 'scale': 0 };
        }
        if (obj.hasOwnProperty(key)) {
          return true
        } else {
          return false
        }
      };
    },
  },
  watch: {},
  created() {
    this.doGetDicts();
    this.getAisleSelect();
  },
  methods: {
    /* 字典 */
    doGetDicts() {
      getDictionary({code: "pol_type"}).then((res) => {
        this.polTypeList = res.data.data;
      });
    },
    /* 通道列表 */
    getAisleSelect() {
      getAisleOemList("-1", "-1").then((res) => {
        this.aisleList = res.data.data.records;
      });
    },
    /* 选中通道 渲染政策模板 */
    templateAllChange(e) {
      this.$confirm("是否为该通道新增模板?", "新增模板", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          if (this.data.length > 0) {
            for (const item of this.data) {
              if (e.aisleCode === item.aisleCode) {
                this.$message({
                  type: "warning",
                  message: "无法重复新增此通道为模板！",
                });
                return false;
              }
            }
          }
          getDetailTemplate(e.aisleCode).then((res) => {
            if (res.data.code == "200") {
              let initData = res.data.data;
              this.data.push(initData);
              // this.$nextTick(() => {
              //   this.data = JSON.parse(JSON.stringify(initData));
              //   // console.log(this.data, 'temp---data')
              // });
              this.$message({
                type: "success",
                message: "新增成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.message,
              });
            }
          });
        })
        .catch(() => {
        });
    },
    /* 编辑政策模板详情方法 */
    getEditDatail(data) {
      this.data = data.policyList;

      // this.$nextTick(() => {
      //   this.data = JSON.parse(JSON.stringify(this.data));
      // });
    },
    /* 全通道政策模板 一键填入 */
    submitCover() {
      if (this.aptTemplate.aptRate == 0) {
        this.$message({
          type: "warning",
          message: "请输入结算成本",
        });
      } else if (this.aptTemplate.aptScale == 0) {
        this.$message({
          type: "warning",
          message: "请输入结算比例",
        });
      } else if (this.aptTemplate.aptMax == 0) {
        this.$message({
          type: "warning",
          message: "请输入封顶金额",
        });
      } else {
        for (let d = 0; d < this.data.length; d++) {
          for (const product of this.data[d].servicePolicy.scan.productList) {
            for (const rateItem of product.rateList) {
              rateItem.rate = this.aptTemplate.aptRate;
              rateItem.scale = this.aptTemplate.aptScale;
              rateItem.aptMax = this.aptTemplate.aptMax;
            }
          }
          for (const product of this.data[d].servicePolicy.pos.productList) {
            for (const rateItem of product.rateList) {
              rateItem.rate = this.aptTemplate.aptRate;
              rateItem.scale = this.aptTemplate.aptScale;
              rateItem.aptMax = this.aptTemplate.aptMax;
            }
          }
          // this.data[d].servicePolicy.codeAdvanceRate
        }
      }
    },
    /**
     * @func 设定默认通道
     * @desc 设定默认通道
     * @param {Number} idx - 下标
     * */
    handleSwitch(idx) {
      this.data[idx].isDefault = 1
      // this.data[idx].isDefault = this.data[idx].isDefault == 1 ? 0 : 1;
      for (let index = 0; index < this.data.length; index++) {
        if (this.data[index].aisleCode !== this.data[idx].aisleCode) {
          this.data[index].isDefault = 0;
        }
      }
    },
    /* input 数值检验 */
    proving(e) {
      var keynum = window.event ? e.keyCode : e.which;   //获取键盘码
      if (keynum == 189 || keynum == 109) { //禁止输入负数
        e.target.value = 0
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.haruyuki-width-100s{
//  max-width: 40% !important;
  // width: 300px !important;
  width: inherit;
}
.w100{
  width: 100%;
}
.p_L10{
  padding-left: 4px !important;
}
details {
  padding-left: 20px;
}
details summary:focus {
  outline: none;
}
summary {
  width: 100%;
  /* border-bottom: 1px solid #e0eafc; */
  border-bottom: 1px solid #ffffff;
}
summary::-webkit-details-marker {
  display: none;
}
summary:not(:only-child):before {
  content: "\e791";
  color: #606266;
  transition: color 0.15s linear;
  font-size: 16px;
  cursor: pointer;
  margin-right: 6px;
  font-family: element-icons !important;
}
details[open] > summary:not(:only-child):before {
  content: "\e790";
  color: #606266;
  transition: color 0.15s linear;
  font-size: 16px;
  cursor: pointer;
  margin-right: 6px;
  font-family: element-icons !important;
}

.tree {
  /* background: linear-gradient(90deg, #8e9eab 0%, #eef2f3 100%); */
  margin-bottom: 30px;
}
/* Haruyuki row height line */
.tree-item {
  height: 40px;
  line-height: 40px;
  transition: all 1s ease 0s;
  user-select: none;
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
}
.tree-item:hover {
  background: rgba(195,207,226, 0.2);
  border-radius: 6px;
}

.aisle-policy-bg {
  /* background-color: #e0eafc; */
  background-color: #f9fafc;
  /* padding: 6px 0; */
  padding-left: -10px;
  padding-right: 10px;
  border-radius: 6px;
  /* box-shadow: 0 2px 12px rgba(224, 234, 252, 0.8); */
  box-shadow: 0 2px 12px rgba(153,167,177, 0.4);
  color: #111111;
}

.input-tree-item {
  display: flex;
  align-items: center;
}
.input-tree-item-left {
  width: 300px;
}

.input-tree-item-right {
  margin-left: 6px;
  color: #99a7b1;
}
.summary-box {
  display: flex;
  align-items: center;
  padding: 6px 0;
}

.policy-mr-3 {
  margin-right: 3px;
}

.policy-ml-3 {
  margin-left: 3px;
}
</style>